<template>
	<view class="content">
		<view class="header">
			<view class="name">
				<view class="icon">
					<img src="/static/icon/adress.png" alt="" width="30px">
				    <text  style="padding-left:20px">嘻嘻梦想小镇</text>
				</view>
				
				<view class="icon">
					<img src="/static/icon/message.png" alt="" width="30px">

				</view>

			</view>
			<view class="search">
				<img src="/static/icon/search.png" alt="" width="20px" style="padding-left:20px">
				<input type="text" placeholder="永辉超市优惠商品"  style="padding-left:10px">
			</view>
            <view class="midimg">
				<img src="/static/imgs/assets/02.jpg" alt="" width="100%">
			</view>
		</view>
		<view class="middle">
			<view class="list">
				<view class="item"><img src="/static/imgs/assets/super.png" alt="">  超市便利</view>
			    <view class="item"><img src="/static/imgs/assets/market.png" alt="">菜市场</view>
			    <view class="item"><img src="/static/imgs/assets/fruits.png" alt="">水果店</view>
			    <view class="item"><img src="/static/imgs/assets/flower.png" alt="">鲜花绿植</view>
			    <view class="item"><img src="/static/imgs/assets/drug.png" alt="">医药健康</view>
			    <view class="item"><img src="/static/imgs/assets/home.png" alt="">时尚家居</view>
			    <view class="item"><img src="/static/imgs/assets/cake.png" alt=""> 烘焙蛋糕</view>
			    <view class="item"><img src="/static/imgs/assets/sign.png" alt="">签到</view>
			    <view class="item"><img src="/static/imgs/assets/prestige.png" alt="">大牌免运</view>
			    <view class="item"><img src="/static/imgs/assets/red.png" alt="">红包套餐</view>
			</view>
			
		</view>
		<view class="footer">
			<view class="con">
				<view>附近店铺</view>
				<view class="more" @click="moreclick"><a href="#"> 查看更多</a></view>
			</view>
			<view class="listcontent"  v-for="shop in shops" :key="shop.id" @click="shopclick(shop._id)">
				<view class="listitem">
					<!-- <img :src="shop.imgUrl" alt="" width="80px" height="80px"> -->
                   <img :src="shop.imgUrl" width="70px" height="70px" />	
                    <!-- blue-bridge-home/src/static/imgs/yh.jpg -->
				</view>
				<view class="listitem listcon">
					{{shop.name}}
					<view class="listrow">
						<view>{{shop._id}}</view>
					   <view>月售：{{shop.sales}}</view>
					   <view>起送：{{shop.expressLimit}}</view>
					   <view>基础运费：{{shop.expressPrice}}</view>
				   </view>
				   <view style="color:red">{{shop.slogan}}</view>

				</view>
				

			</view>

		</view>
	</view>
</template>



<script>
export default {
  data() {
    return {
      shops: [],
    }
  },
  onLoad() {
    this.shopsdata()//获取店铺数据
  },
  methods: {
    shopsdata() {
      uni.request({
        url: 'http://localhost:3000/hotList',
        success: (res) => {
            this.shops = res.data
        },
      })
    },
	//点击超市跳转
	shopclick(id1) {
	  console.log(id1)
      uni.navigateTo({
        url:`/pages/index/wem?id=${id1}`,
      });
    },
	//更多
	moreclick(){
		uni.navigateTo({
        url:'/pages/index/more',
      });
	}
  }
}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.content .header{
		width: 100%;
		background-color: rgb(28, 230, 230);
	}
	.content .header .name{
		font-size: 24px;
		color:azure;
		margin-left: 15px;
		margin-top: 10px;
		display: flex;
		justify-content: space-between;

	}
	.content .header .search{
		border: 1px solid aliceblue;
		border-radius: 2ch;
		display: flex;
		width: 50%;
		background-color: aliceblue;
		margin-top: 15px;
		margin-left: 10px;

	}
	.content .header .midimg{
		margin-top: 10px;
	}
	.middle{
      margin-top: 0px;
	  width: 100%;
    }
  .middle .list{
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content:space-evenly;
	  background-color: rgb(28, 230, 230);
    }
  .middle .list .item{
      width: 20%;
      height: 110px; 
      display: flex;
	  flex-direction: column;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      font-size: 16px; 
      margin-bottom: 10px; 
	  
    }
	
	/* 附近店铺 下面 */
	.content .footer{
		width: 100%;
		margin-top: 10px;
		
	}
	.content .footer .con{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* background-color: aquamarine; */
		font-size: 20px;

	}
	.content .footer .con .more a{
		color: black;
		text-decoration: none;
	}
	.content .footer .con .more a:hover{
		color:blue;
	}
	.content .footer .listcontent{
		margin-top: 20px;
		width: 100%;
		display: flex;
		flex-direction: row;
		border-top: 1px solid grey;
		margin-left: 20px;
		padding-top: 20px;

	}
	.content .footer .listcontent .listitem .listrow{
		display: flex;
		flex-direction: row;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.content .footer .listcontent .listitem .listrow view{
		margin-right: 20px;
	}
	.content .footer .listcontent .listcon{
		margin-left: 30px;
		font-size:15px

	}
	
</style>
